<template>
    <!-- 分配权限的对话框 -->
    <el-dialog title="分配权限" v-model="setRightDialogVisible" width="50%" @close="setRightDialogClosed">
      <!-- 树形控件 -->
      <el-tree ref="treeRef" style="max-width: 600px" :data="rightsList" show-checkbox node-key="id" default-expand-all :default-checked-keys="defKeys" :props="defaultProps"></el-tree>
      <span class="dialog-footer">
        <el-button>取 消</el-button>
        <el-button type="primary" @click="allotRights">确 定</el-button>
      </span>
    </el-dialog>
  </template>
  
  <script  setup>
  import { ref, computed } from 'vue'
  import { getRightsListApi } from '@/api/rights'
  import { setRoleRightApi } from '@/api/role'
  const defaultProps = {
    // 各级之间通过什么字段进行关联
    children: 'children',
    // 显示的文本的字段
    label: 'authName'
  }
  // 获取所有的权限列表（树形）
  const rightsList = ref([])
  const getRightsList = async () => {
    const data = await getRightsListApi('tree')
    rightsList.value = data
  }
  // 获取所有权限数据
  getRightsList()
  
  // 树形组件dom对象
  const treeRef = ref(null)
  // 对话框的控制
  const setRightDialogVisible = ref(false)
  // 监听对话框的关闭事件
  const setRightDialogClosed = () => {
    setRightDialogVisible.value = false
    //  清空树形控件中选中的数据
    defKeys.value = []
  }
  
  // 定义当前修改的角色的数据
  const role = ref([])
  
  // 获取该角色的所有一级权限id作为默认展开的节点key,用户设置默认展开的一级节点，但是一般我们全部展开
  // const defaultExpandedKeys = computed(() => role.chileren.value.map(item => item.id))
  
  // 定义默认选中的节点id值数组
  const defKeys = ref([])
  // 通过递归的写法找出该角色对应的权限的最后一级id
  function getLeafKeys(node, arr) {
    if (node.children) {
      node.children.forEach(item => {
        getLeafKeys(item, arr)
      })
    } else {
      arr.push(node.id)
    }
  }
  
  // 对外提供打开对话框的方法
  const open = row => {
    role.value = row
    // 找出该角色对应的权限的最后一级id
    getLeafKeys(row, defKeys.value)
    setRightDialogVisible.value = true
    // dom更新是异步，而且需要手动使用组件的方法去刷新
    setTimeout(() => {
      treeRef.value.setCheckedKeys(defKeys.value)
    }, 0)
  }
  
  const emit = defineEmits(['getRoleList'])
  // 提交授权
  const allotRights = async () => {
    // 1.获取全选节点的id
    const keys = treeRef.value.getCheckedKeys()
    // 2.获取半选的节点id
    const halfKeys = treeRef.value.getHalfCheckedKeys()
    // 3.将以上2者进行合并
    const rids = [...halfKeys, ...keys].join(',')
    // 3.调用接口，提交数据
    await setRoleRightApi(role.value.id, rids)
    // 4.关闭对话框
    setRightDialogVisible.value = false
    // 5.刷新角色列表
    emit('getRoleList')
  }
  
  defineExpose({ open })
  </script>
  
  
  <style lang="scss" scoped>
  </style>